<style>
	page { background-color: #fff; }
	.comment-create { padding: 40rpx; }

	/*comment-create_order*/
	.comment-create_order { height: 80rpx; }
	.comment-create_order .icon { margin-right: 20rpx; width: 80rpx; height: 80rpx; border-radius: 8rpx; overflow: hidden; }
	.comment-create_order .desc { line-height: 80rpx; color: #333; font-size: 28rpx; }

	/*comment-create_star*/
	.comment-create_star { height: 80rpx; line-height: 80rpx; }
	.comment-create_star ._title { margin-right: 20rpx; color: #333; font-weight: 700; }
	.comment-create_star ._star { }

	/*comment-create_content*/
	.comment-create_content { margin-top: 20rpx; padding: 28rpx; background: #fafafa; border-radius: 20rpx; }
</style>

<template>
	<view>
		<an-nav-bar title="评价"></an-nav-bar>

		<view class="comment-create">
			<view class="flex comment-create_order">
				<view class="flex-0 icon">
					<image class="image" mode="scaleToFill" :src="$common.binImage(order.projectImg)"></image>
				</view>
				<view class="flex-1 desc">
					{{order.projectName}}
				</view>
			</view>

			<view class="flex comment-create_star">
				<view class="flex-0 _title">
					服务评价
				</view>
				<view class="flex-1 _star">
					<uni-rate size="30" color="#d3d3d3" activeColor="#aa8050" v-model="editFormValue.attitudeScore" @change="rateChange" />
				</view>
			</view>

			<view class="comment-create_content">
				<view>
					<textarea class="__textarea" v-model="editFormValue.comment" placeholder="说说服务态度怎么样" :maxlength="200"></textarea>
				</view>
				<view style="margin-top: 20rpx; width: 140rpx; height: 140rpx;" @click="$refs.refUploadImage.init();">
					<template v-if="editFormValue.imgPath">
						<image mode="scaleToFill" class="image" :src="$common.binImage(editFormValue.imgPath)"></image>
					</template>
					<template v-else>
						<image mode="scaleToFill" class="image" src="/static/image/plus.png"></image>
					</template>
				</view>
			</view>
		</view>

		<view style="padding: 0 48rpx;">
			<button class="theme-btn" :disabled="editBtnDisabled" @click="editFormSubmit">提交</button>
		</view>

		<!-- 组件 -->
		<UploadImage ref="refUploadImage" @sync="syncUploadImage" />
	</view>
</template>

<script>
	import {
		readRequest,
	} from "@/api/order"
	import {
		orderCreateRequest as createRequest,
	} from "@/api/comment"

	import UploadImage from "@/components/upload/image"

	export default {
		components: {
			UploadImage,
		},
		data() {
			return {
				id: '',
				order: {},
				userInfo: {},

				editBtnDisabled: false,
				editFormValue: {
					attitudeScore: 5,
					imgPath: '',
				},
				editFormRuleField: [],
				editFormRule: {},
			}
		},
		onLoad(options) {
			this.id = options.id
			if (this.id) {
				readRequest(this.id, true).then(res => {
					this.order = res.data
				})
			}
		},
		onShow() {

		},
		methods: {
			rateChange(e) {
				this.editFormValue.attitudeScore = e.value
			},
			editFormSubmit() {
				if (!this.editFormValue.comment) {
					this.$common.toast('请输入评价内容')
					return false
				}

				// bin
				this.editFormValue.orderId = this.id
				this.editFormValue.commentType = 2 // 1-系统生成 2-用户填写 

				this.editBtnDisabled = true
				createRequest(this.editFormValue, true).then(res => {
					this.$common.toast()
				})
				setTimeout(() => {
					this.editBtnDisabled = false
					uni.navigateBack()
				}, 1000)
			},
			syncUploadImage(url) {
				this.editFormValue.imgPath = url
			},
		},
	}
</script>
